<#include "/include/tag.ftl">
<#import "/macro/articleTemplate.ftl" as art>
<html lang="en">
<head>
	<title>Share Advance</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<#include "/include/common.ftl">
</head>
<body class="home">
	<#include "/template/header.ftl">
	<div id="content-wrapper">	
		<header class="secondary head"></header>
		<!-- container -->
		<div class="container">
		
			<ol class="breadcrumb">
				<li><a href="${ctx}/index">首页</a></li>
				<li><a href="${ctx}/article/getArticlesList">文章</a></li>
				<li class="active">${article.title}</li>
			</ol>
		
			<div class="row">
				<div class="col-sm-9 maincontent">
					<article class=" type-post format-standard hentry">
						<input type="hidden" id="articleId" value="${article.articleId}">
		                <h1 class="post-title">${article.title}</h1>
		                <div class="post-meta">
		                        <span class="date">${article.releaseDate?string("yyyy-MM-dd HH:mm:ss")}</span>
								<span class="author">${article.username}</span>
								<span class="comments"><a href="#comment_anchor">${article.commentNum} 评论</a></span>
								<span class="like-count">${article.praise}</span>
		                </div><!-- end of post meta -->
		                <p class="text">${article.txt}</p>
		       		</article>
		       		<div class="like-btn">
			            <form id="like_form" action="#" method="post">
			           		<span class="like-it" >${article.praise}</span>
			            	
			            </form>
			    	</div>
			    	<section >
		                <p class="error" style="font-size:20px" id="comment_anchor"><span class="glyphicon glyphicon-star-empty"></span>精彩评论</p>
		                <div id="comments">
		                	<#if article.commentNum == 0>
		                		<blockquote><p>还没有评论，快来抢沙发吧！</p></blockquote>
		                	</#if>
		                	<!--加载评论列表-->
		                	<ol class="commentlist"></ol>
		             		<!--分页-->
		                </div>
		             	<div class="respond">
		                    <p class="notice" style="font-size:20px" ><span class="glyphicon glyphicon-share-alt"></span>发表评论</p>
		                    <#if signin == false>
		                        <div class="form-group" align="center">
		                    		<span class="glyphicon glyphicon-lock">
		                    			注册用户登录后才能发表评论，请<a href="${ctx}/login">登录</a>或<a href="${ctx}/regist">注册</a>
		                    		</span>
		                    	</div>
		                    <#else>
			                    <form id="respond_form" class='respond_form' action="${ctx}/comment/sendComment?articleId=${article.articleId}" method="post" >
			                        <div class="form-group">
			                        	<label class="control-label">评论内容:</label>
			                        	<textarea name="content" class="form-control" rows="5"></textarea>
			                        </div>
			                        <div class="form-group text-right">
			                            <input class="btn btn-primary" type="submit"  value="评论"/>
			                        </div>
			                    </form>
		                    </#if>
		                </div>
		         	</section>
				</div>
			</div>
		</div>
	</div>
	<a href="#top" id="scroll-top"></a>
	<#include "/template/footer.ftl">
</body>
</html>
		
<script type="text/javascript">
	$(function(){
		loadCommentsList();
		
		$('#like_form .like-it').click(function(){
		    var likeButton = $(this);
		    var likeHtml = likeButton.html();
		    var likeNum = parseInt(likeHtml, 10);
		    likeNum++;
		    likeButton.html(likeNum);
		    
		    //$('#like-it-form').ajaxSubmit(options);
		});
		
		//验证用户评论内容
		$(".respond_form").validate({
			rules: {
				content:{required:true,minlength:5},
			},
			messages: {
				content:{required:"评论内容不能为空", minlength:"评论内容至少5个字"},
			},
		});
		
	});
	
	function commitBtn(pId) {
		var id = $("#articleId").val();
		var content = $("#content"+pId).val();
		window.loaction.href="${ctx}/comment/sendComment?articleId="+id+"&parentId"+pId+""
		/*$.ajax({
			url : '${ctx}/comment/sendComment',
			type : 'POST',
			dataType : 'JSON',
			async : false,
			data : {"articleId":id,"parentId":pId,"content":content},
			success : function(data) {
				console.log(data);
			}
		});*/
	}
	
	//加载评论列表
	function loadCommentsList() {
		var articleId = $("#articleId").val();
		var imgUrl = "${ctx}/static/lib/assets/images/default_avatar.png"
		if(articleId) {
			$.ajax({
				type : 'POST',
				dataType : 'JSON',
				url : '${ctx}/comment/getCommentsList',
				data : {'articleId': articleId},
				success : function(data){
					result = data.data;
					$("#comments .commentlist").empty();
					var html="";
					$.each(result,function(i,n){
						html ="<li class='comment' >"
							 +"<article >"
							 +"<a href='#'>"
							 +"<img src='"+imgUrl+"' class='avatar avatar-60 photo' height='60' width='60'>"
							 +"</a>"
							 +"<div class='comment-meta'>"
							 +"<h5 class='author'>"
							 +"<cite class='fn'>"
							 +"<a href='#' rel='external nofollow' class='url'>"+n.username+"</a>"
							 +"</cite>"
							 +"</h5>"
							 +"</div>"
							 +"<div class='comment-body'>"
							 +"<p>"+n.content+"</p>"
							 +"</div>"
							 +"<div align='right'>"
							 +"<time>"+n.createTime+" </time>"
							 +"<a data-toggle='collapse' data-parent='#accordion' href='#collapse"+n.commentId+"'>回复</a>"
							 +"<div id='collapse"+n.commentId+"' class='panel-collapse collapse'>"
							 +"<div class='jumbotron'>"
							 +"<form action='${ctx}/comment/sendComment?articleId=${article.articleId}' method='post'>"
							 +"<textarea class='form-control' name='content' /></textarea>"
							 +"<input name='parentId' type='hidden' value='"+n.commentId+"'/>"
							 +"<div class='top-margin'>"
			                 +"<button class='btn btn-primary' type='submit'>评论</button>"
			                 +"</div>"
			                 +"</form>"
							 +"</div>"
							 +"</div>"
							 +"</div>"
							 +"</article>"
							 +"</li>";
						$("#comments .commentlist").append(html);
					});
				}
			});
		}else {
			alert("文章不存在，评论加载失败！");
		}
	}
</script>